<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand" >{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="16">
        <div class="leftBox">
          <div style="display:flex;justify-content:space-between">
            <el-date-picker
              v-model="dateValue"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="monthChange"
              align="right">
            </el-date-picker>
            
            <div>
              <span style="display:inline-block;width:16px;height:16px;background-color:#26c6da;border-radius:8px;vertical-align:middle"></span>
              <span style="font-size:16px;vertical-align:middle;margin-right:10px;">面试率</span>
              <span style="display:inline-block;width:16px;height:16px;background-color:#1e88e5;border-radius:8px;vertical-align:middle"></span>
              <span style="font-size:16px;vertical-align:middle;margin-right:10px;">入职率</span>
              <el-button
                  class="download"
                  size="small"
                  @click="download"
                  round>导出
                </el-button>
            </div>
          </div>
          <div id="container" style="min-width:400px;height:400px"></div>
          <el-select v-model="customer" @change="customerChange" placeholder="请选择客户">
            <el-option v-for="(item,index) in customerL" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="name" @change="pusherChange" placeholder="请选择招聘人员">
            <el-option v-for="(item,index) in nameL" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <div style="margin-left:120px;margin-top:20px;">
            <table border="0" cellspacing="1" cellpadding="0" class="table">
              <thead align="center" style="font-size:14px;color:#dde0e5">
                <tr>
                  <th></th>
                  <th v-for="(item,index) in customerList" :key="index">{{item}}</th>
                </tr>
              </thead>
              <tbody align="center" style="font-size:12px;color:#999;">
                <tr>
                  <td style="line-height:40px;color:#cdd2d9;font-weight:700">推荐数</td>
                  <td v-for="(item,index) in recommendNum" :key="index">{{item}}</td>
                  <td><span style="display:inline-block;width:62px;height:22px;background-color:#26c6da;border-radius:2px;text-align:center;line-height:22px;color:#fff">{{recommendNumTotal}}</span></td>
                </tr>
                <tr>
                  <td style="line-height:36px;color:#cdd2d9;font-weight:700">面试数</td>
                  <td v-for="(item,index) in interviewNum" :key="index">{{item}}</td>
                  <td><span style="display:inline-block;width:62px;height:22px;background-color:#1e88e5;border-radius:2px;text-align:center;line-height:22px;color:#fff">{{interviewNumTotal}}</span></td>
                </tr>
                <tr>
                  <td style="line-height:36px;color:#cdd2d9;font-weight:700">面试率</td>
                  <td v-for="(item,index) in interviewR" :key="index">{{item+"%"}}</td>
                  <td><span style="display:inline-block;width:62px;height:22px;background-color:#745af2;border-radius:2px;text-align:center;line-height:22px;color:#fff">{{interviewRtotal + "%"}}</span></td>
                </tr>
                <tr>
                  <td style="line-height:36px;color:#cdd2d9;font-weight:700">面试通过数</td>
                  <td v-for="(item,index) in interviewPass" :key="index">{{item}}</td>
                  <td><span style="display:inline-block;width:62px;height:22px;background-color:#ff6783;border-radius:2px;text-align:center;line-height:22px;color:#fff">{{interviewPassTotal}}</span></td>
                </tr>
                <tr>
                  <td style="line-height:36px;color:#cdd2d9;font-weight:700">入职数</td>
                  <td v-for="(item,index) in entryNum" :key="index">{{item}}</td>
                  <td><span style="display:inline-block;width:62px;height:22px;background-color:#ffb22b;border-radius:2px;text-align:center;line-height:22px;color:#fff">{{entryNumTotal}}</span></td>
                </tr>
                <tr>
                  <td style="line-height:36px;color:#cdd2d9;font-weight:700">入职率</td>
                  <td v-for="(item,index) in entryR" :key="index">{{item + "%"}}</td>
                  <td><span style="display:inline-block;width:62px;height:22px;background-color:#50c188;border-radius:2px;text-align:center;line-height:22px;color:#fff">{{entryRtotal + "%"}}</span></td>
                </tr>
              </tbody>
          </table>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="rightBox">
          <el-scrollbar style="height:100%">
            <span style="font-weight:700;">入职（{{data}}）人</span>
            <div v-for="(item,index) in message" :key="index" class="box" v-if="item !== null">
              <span style="display:inline-block;width:20px;height:20px;background-color:#2cc5ca;text-align:center;line-height:20px;color:#fff;font-weight:700;font-size:16px;border-radius:10px;margin-left:6px;">{{index + 1}}</span>
              <span style="display:inline-block;color:#2cc5ca;font-weight:700;font-size:16px;">{{item.name}}</span>
              <div class="line"></div>
              <div style="margin-top:4px;font-size:14px;line-height:24px;color:#757575">
                <el-row>
                  <el-col :span="8" :offset="2">毕业时间：{{item.graduationTime}}</el-col>
                  <el-col :span="8" :offset="2">联系方式：{{item.phone}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8" :offset="2">地区：{{item.area}}</el-col>
                  <el-col :span="8" :offset="2">职位：{{item.postName}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8" :offset="2">入职时间：{{item.entryTime}}</el-col>
                  <el-col :span="8" :offset="2">进场时间：{{item.approachTime}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="8" :offset="2">客户：{{item.customerName}}</el-col>
                  <el-col :span="8" :offset="2">推送人：{{item.pusher}}</el-col>
                </el-row>
              </div>

            </div>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>


  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import moment from 'moment'
import Highcharts from 'highcharts'
export default {
  data(){
    return {
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      title:"入职统计表",
      dateValue:[new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),new Date(new Date().getFullYear(), new Date().getMonth()-1, new Date(new Date().getFullYear(), new Date().getMonth(), 0).getDate())],
      name:"",
      nameL:[],
      customer:"",
      customerL:[],
      message:[],
      interviewRateList:[],
      entryRateList:[],
      nameList:[],
      customerList:[],
      recommendNum:[],
      recommendNumTotal:"",
      interviewNum:[],
      interviewNumTotal:"",
      interviewR:[],
      interviewRtotal:[],
      interviewPass:[],
      interviewPassTotal:[],
      entryNum:[],
      entryNumTotal:[],
      entryR:[],
      entryRtotal:[],
    }
  },
  computed:{
    data:function(){
      return this.message.length
    }
  },
  created(){
    axios.post(this.url + "/workreport/selecthrnames",{
      time:this.dateValue
    })
    .then(res =>{
      this.unlogin(res.data.code)
      if(res.data.code == 200){
        this.nameL = res.data.data
        this.name = this.nameL[0];
        axios.post(this.url + "/workreport/selectcustomerreport",{
          time:this.dateValue,
          name:this.name
        }).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.customerList = res.data.data[0];
            this.recommendNumTotal = res.data.data[1].splice(res.data.data[1].length -1,1).join("");
            this.recommendNum = res.data.data[1];
            this.interviewNumTotal = res.data.data[2].splice(res.data.data[2].length -1,1).join("");
            this.interviewNum = res.data.data[2];
            this.interviewRtotal = res.data.data[3].splice(res.data.data[3].length -1,1).join("");
            this.interviewR = res.data.data[3];
            this.interviewPassTotal = res.data.data[4].splice(res.data.data[4].length -1,1).join("");
            this.interviewPass = res.data.data[4];
            this.entryNumTotal = res.data.data[5].splice(res.data.data[5].length -1,1).join("");
            this.entryNum = res.data.data[5];
            this.entryRtotal = res.data.data[6].splice(res.data.data[6].length -1,1).join("");
            this.entryR = res.data.data[6];
          }
        })
      }
    });
    axios.post(this.url + "/workreport/selectcustomernames",{
      time:this.dateValue
    }).then(res=>{
      this.unlogin(res.data.code)
      if(res.data.code == 200){
        this.customerL = res.data.data
      }

    });
    axios.post(this.url + "/workreport/selectentryreport",{
      time:this.dateValue
    })
    .then(res =>{
      this.unlogin(res.data.code)
      if(res.data.code == 200){
        this.message = res.data.data
      }
    });

  },
  mounted(){
    this.getData();
  },
  methods:{
    getData(){
      axios.post(this.url + "/workreport/selecthrreport",{
        time:this.dateValue
        }).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            for(let i = 0, len = res.data.data.length; i < len; i++){
              this.interviewRateList.push(res.data.data[i].interviewRate);
              this.entryRateList.push(res.data.data[i].entryRate);
              this.nameList.push(res.data.data[i].name)
            }
            this.draw(this.nameList,this.interviewRateList,this.entryRateList)
          }
      });
    },
    // 下载按钮点击
      download() {
          // axios.post(this.url + "/statistics/entryInfo/ExcelDownload", {
          //   startTime:moment(this.dateValue[0]).format('YYYY-MM-DD'),
          //   endTime:moment(this.dateValue[1]).format('YYYY-MM-DD')
          // }).then(res => {
          //   this.unlogin(res.data.code);
          //   if (res.data.code !== -1) {
          //     window.location.href = this.url + '/statistics/entryInfo/ExcelDownload?startTime=' + moment(this.dateValue[0]).format('YYYY-MM-DD') + '&endTime=' + moment(this.dateValue[1]).format('YYYY-MM-DD') + "";
          //   }
          // })
          window.location.href = this.url + '/statistics/entryInfo/ExcelDownload?startTime=' + moment(this.dateValue[0]).format('YYYY-MM-DD') + '&endTime=' + moment(this.dateValue[1]).format('YYYY-MM-DD') + "";
        
      },
    draw(name,interview,entry){
      Highcharts.chart("container",{
        chart: {
          type: 'area'
        },
        title: {
          text: ''
        },
        xAxis: {
          gridLineWidth:1,
          gridLineColor: '#e9f1f3',
          categories: name,
        },
        yAxis: {
          gridLineWidth:1,
          gridLineDashStyle:'Dash',
          title: {
            text: ''
          },
          labels: {
            formatter: function () {
              return this.value +"%";
            }
          }
        },
        tooltip: {
          pointFormat: '{series.name}:{point.y:,.0f}%'
        },
        series: [{
          name: '面试率',
          color: '#26c6da',
          fillColor: {       // 设置渐变的填充颜色
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1
            },
            stops: [
              [0, "#26c6da"],
              [1, Highcharts.Color("#fff").setOpacity(0).get('rgba')]
            ]
          },
          data: interview
        }, {
          name: '入职率',
          color: '#1e88e5',
          fillColor: {       // 设置渐变的填充颜色
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1
            },
            stops: [
              [0, "#1e88e5"],
              [1, Highcharts.Color("#fff").setOpacity(0).get('rgba')]
            ]
          },
          data: entry
        }]
      })
    },
    monthChange(val){
      axios.post(this.url + "/workreport/selecthrnames",{
        time:val
      })
      .then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.nameL = res.data.data
          if(this.name){
            this.name = this.nameL[0];
          }
        }
      });
      axios.post(this.url + "/workreport/selectcustomernames",{
        time:val
      }).then(res=>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.customerL = res.data.data
          if(this.customer){
            this.customer = this.customerL[0];
          }
        }

      });
      axios.post(this.url + "/workreport/selecthrreport",{
        time:val
        }).then(res =>{
          this.unlogin(res.data.code)
          if(res.data.code == 200){
            this.nameList = [];
            this.interviewRateList = [];
            this.entryRateList = [];
            for(let i = 0, len = res.data.data.length; i < len; i++){
              this.interviewRateList.push(res.data.data[i].interviewRate);
              this.entryRateList.push(res.data.data[i].entryRate);
              this.nameList.push(res.data.data[i].name)
            }
            this.draw(this.nameList,this.interviewRateList,this.entryRateList)
          }
      });
      axios.post(this.url + "/workreport/selectentryreport",{
        time:val
      })
      .then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.message = res.data.data
        }
      });
      let nameS = "";
      if(this.name){
        nameS = this.name
      }else {
        nameS = this.customer
      };
      axios.post(this.url + "/workreport/selectcustomerreport",{
        time:val,
        name:nameS
      }).then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.customerList = res.data.data[0];
          this.recommendNumTotal = res.data.data[1].splice(res.data.data[1].length -1,1).join("");
          this.recommendNum = res.data.data[1];
          this.interviewNumTotal = res.data.data[2].splice(res.data.data[2].length -1,1).join("");
          this.interviewNum = res.data.data[2];
          this.interviewRtotal = res.data.data[3].splice(res.data.data[3].length -1,1).join("");
          this.interviewR = res.data.data[3];
          this.interviewPassTotal = res.data.data[4].splice(res.data.data[4].length -1,1).join("");
          this.interviewPass = res.data.data[4];
          this.entryNumTotal = res.data.data[5].splice(res.data.data[5].length -1,1).join("");
          this.entryNum = res.data.data[5];
          this.entryRtotal = res.data.data[6].splice(res.data.data[6].length -1,1).join("");
          this.entryR = res.data.data[6];
        }
      })
    },
    pusherChange(val){
      axios.post(this.url + "/workreport/selectentryreport",{
        time:this.dateValue,
        name:val
      })
      .then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.message = res.data.data
        }
      });
      this.customer = ""
      axios.post(this.url + "/workreport/selectcustomerreport",{
        time:this.dateValue,
        name:val
      }).then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.customerList = res.data.data[0];
          this.recommendNumTotal = res.data.data[1].splice(res.data.data[1].length -1,1).join("");
          this.recommendNum = res.data.data[1];
          this.interviewNumTotal = res.data.data[2].splice(res.data.data[2].length -1,1).join("");
          this.interviewNum = res.data.data[2];
          this.interviewRtotal = res.data.data[3].splice(res.data.data[3].length -1,1).join("");
          this.interviewR = res.data.data[3];
          this.interviewPassTotal = res.data.data[4].splice(res.data.data[4].length -1,1).join("");
          this.interviewPass = res.data.data[4];
          this.entryNumTotal = res.data.data[5].splice(res.data.data[5].length -1,1).join("");
          this.entryNum = res.data.data[5];
          this.entryRtotal = res.data.data[6].splice(res.data.data[6].length -1,1).join("");
          this.entryR = res.data.data[6];
        }
      })
    },
    customerChange(val){
      axios.post(this.url + "/workreport/selectentryreport",{
        time:this.dateValue,
        name:val
      })
      .then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.message = res.data.data
        }
      });
      this.name = "";
      axios.post(this.url + "/workreport/selectcustomerreport",{
        time:this.dateValue,
        name:val
      }).then(res =>{
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.customerList = res.data.data[0];
          this.recommendNumTotal = res.data.data[1].splice(res.data.data[1].length -1,1).join("");
          this.recommendNum = res.data.data[1];
          this.interviewNumTotal = res.data.data[2].splice(res.data.data[2].length -1,1).join("");
          this.interviewNum = res.data.data[2];
          this.interviewRtotal = res.data.data[3].splice(res.data.data[3].length -1,1).join("");
          this.interviewR = res.data.data[3];
          this.interviewPassTotal = res.data.data[4].splice(res.data.data[4].length -1,1).join("");
          this.interviewPass = res.data.data[4];
          this.entryNumTotal = res.data.data[5].splice(res.data.data[5].length -1,1).join("");
          this.entryNum = res.data.data[5];
          this.entryRtotal = res.data.data[6].splice(res.data.data[6].length -1,1).join("");
          this.entryR = res.data.data[6];
        }
      })
    }
  }
}
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}
.hand{
  color: #1099ff;
}
.leftBox{
  background-color:#fff;
  padding-left:10px;
  padding-top:20px;
  width:100%;
}
.rightBox{
  /* width:100%; */
  height:700px;
  margin-left:12px;
  background-color:#fff;
  padding-left:20px;
  padding-top:20px;
  padding-bottom:20px
}
.box{
  margin-top: 20px;
}
.line{
  width:572px;
  height:1px;
  background-color:#dddede;
  margin-top:6px;
}
.download {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-right:10px;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
  }
  .download:hover {
    color: #fff !important;
  }
  
  .download:focus {
    color: #fff !important;
  }
.table{
  width:90%;
}
</style>
